Reactãšã©ãŒããŠã³ããªãŒãå®è£ ããåªé ãªãšã©ãŒãã³ããªã³ã°ã§ã¢ããªã®ã¯ã©ãã·ã¥ãé²ãããŠãŒã¶ãŒäœéšãåäžãããæ¹æ³ãåŠã³ãŸãããã¹ããã©ã¯ãã£ã¹ãé«åºŠãªãã¯ããã¯ãå®äŸã玹ä»ã
Reactãšã©ãŒããŠã³ããªãŒïŒå ç¢ãªãšã©ãŒãã³ããªã³ã°ã®ããã®å æ¬çã¬ã€ã
çŸä»£ã®Webéçºã®äžçã§ã¯ãã¹ã ãŒãºã§ä¿¡é Œæ§ã®é«ããŠãŒã¶ãŒäœéšãæãéèŠã§ãããã£ãäžã€ã®æªåŠçãšã©ãŒãReactã¢ããªã±ãŒã·ã§ã³å šäœãã¯ã©ãã·ã¥ããããŠãŒã¶ãŒãäžæºã«ããã貎éãªããŒã¿ã倱ãå¯èœæ§ããããŸããReactãšã©ãŒããŠã³ããªãŒã¯ããããã®ãšã©ãŒãåªé ã«åŠçãã壿» çãªã¯ã©ãã·ã¥ãé²ããããå埩åããããŠãŒã¶ãŒãã¬ã³ããªãŒãªäœéšãæäŸããããã®åŒ·åãªã¡ã«ããºã ãæäŸããŸãããã®ã¬ã€ãã§ã¯ãReactãšã©ãŒããŠã³ããªãŒã®ç®çãå®è£ ããã¹ããã©ã¯ãã£ã¹ãé«åºŠãªãã¯ããã¯ãç¶²çŸ çã«è§£èª¬ããŸãã
Reactãšã©ãŒããŠã³ããªãŒãšã¯ïŒ
ãšã©ãŒããŠã³ããªãŒã¯ããã®åã³ã³ããŒãã³ãããªãŒå ã®ã©ããã§çºçããJavaScriptãšã©ãŒããã£ãããããããã®ãšã©ãŒããã°ã«èšé²ããã¯ã©ãã·ã¥ããã³ã³ããŒãã³ãããªãŒã®ä»£ããã«ãã©ãŒã«ããã¯UIã衚瀺ããReactã³ã³ããŒãã³ãã§ãããããã¯å®å šç¶²ãšããŠæ©èœããã¢ããªã±ãŒã·ã§ã³ã®äžéšåã®ãšã©ãŒãUIå šäœãããŠã³ãããã®ãé²ããŸããReact 16ã§å°å ¥ããããšã©ãŒããŠã³ããªãŒã¯ã以åã®å ç¢æ§ã«æ¬ ãããšã©ãŒãã³ããªã³ã°ã¡ã«ããºã ã眮ãæããŸããã
ãšã©ãŒããŠã³ããªãŒã¯ãReactã³ã³ããŒãã³ãçšã®`try...catch`ãããã¯ã®ãããªãã®ã ãšèããŠãã ããããã ãã`try...catch`ãšã¯ç°ãªããã³ã³ããŒãã³ãã«å¯ŸããŠæ©èœããã¢ããªã±ãŒã·ã§ã³å šäœã§ãšã©ãŒãåŠçããããã®å®£èšçã§åå©çšå¯èœãªæ¹æ³ãæäŸããŸãã
ãªããšã©ãŒããŠã³ããªãŒã䜿çšããã®ãïŒ
ãšã©ãŒããŠã³ããªãŒã¯ãããã€ãã®éèŠãªå©ç¹ãæäŸããŸãã
- ã¢ããªã±ãŒã·ã§ã³ã®ã¯ã©ãã·ã¥ã鲿¢ïŒ æãéèŠãªå©ç¹ã¯ãåäžã®ã³ã³ããŒãã³ããšã©ãŒãã¢ããªã±ãŒã·ã§ã³å šäœãã¯ã©ãã·ã¥ãããã®ãé²ãããšã§ãã空çœã®ç»é¢ã圹ã«ç«ããªããšã©ãŒã¡ãã»ãŒãžã®ä»£ããã«ããŠãŒã¶ãŒã¯åªé ãªãã©ãŒã«ããã¯UIãèŠãããšã«ãªããŸãã
- ãŠãŒã¶ãŒäœéšã®åäžïŒ ãã©ãŒã«ããã¯UIã衚瀺ããããšã§ããšã©ãŒããŠã³ããªãŒã¯ãŠãŒã¶ãŒããŸã æ£åžžã«æ©èœããŠããã¢ããªã±ãŒã·ã§ã³ã®éšåã䜿ãç¶ããããšãå¯èœã«ããŸããããã«ãããäžå¿«ã§ãã©ã¹ãã¬ãŒã·ã§ã³ã®ããŸãäœéšãé¿ããããšãã§ããŸãã
- ãšã©ãŒã®åé¢ïŒ ãšã©ãŒããŠã³ããªãŒã¯ããšã©ãŒãã¢ããªã±ãŒã·ã§ã³ã®ç¹å®ã®éšåã«åé¢ããã®ã«åœ¹ç«ã¡ãåé¡ã®æ ¹æ¬åå ãç¹å®ããããã°ããã®ã容æã«ããŸãã
- ãã®ã³ã°ãšç£èŠã®åŒ·åïŒ ãšã©ãŒããŠã³ããªãŒã¯ãã¢ããªã±ãŒã·ã§ã³ã§çºçãããšã©ãŒããã°ã«èšé²ããããã®äžå€®ã®å ŽæãæäŸããŸãããã®æ å ±ã¯ãåé¡ãç©æ¥µçã«ç¹å®ãä¿®æ£ããããã«éåžžã«è²Žéã§ããããã¯ãSentryãRollbarãBugsnagãªã©ãã°ããŒãã«ãªã«ãã¬ããžãæã€ç£èŠãµãŒãã¹ã«çµã³ã€ããããšãã§ããŸãã
- ã¢ããªã±ãŒã·ã§ã³ç¶æ ã®ç¶æïŒ ã¯ã©ãã·ã¥ã«ãã£ãŠãã¹ãŠã®ã¢ããªã±ãŒã·ã§ã³ç¶æ ã倱ã代ããã«ããšã©ãŒããŠã³ããªãŒã¯ã¢ããªã±ãŒã·ã§ã³ã®æ®ãã®éšåãæ©èœãç¶ããããšãå¯èœã«ãããŠãŒã¶ãŒã®é²æãšããŒã¿ãä¿æããŸãã
ãšã©ãŒããŠã³ããªãŒã³ã³ããŒãã³ãã®äœæ
ãšã©ãŒããŠã³ããªãŒã³ã³ããŒãã³ããäœæããã«ã¯ã以äžã®ã©ã€ããµã€ã¯ã«ã¡ãœããã®äžæ¹ãŸãã¯äž¡æ¹ãå®è£ ããã¯ã©ã¹ã³ã³ããŒãã³ããå®çŸ©ããå¿ èŠããããŸãã
static getDerivedStateFromError(error): ãã®éçã¡ãœããã¯ãåå«ã³ã³ããŒãã³ãã«ãã£ãŠãšã©ãŒãã¹ããŒãããåŸã«åŒã³åºãããŸããã¹ããŒããããšã©ãŒãåŒæ°ãšããŠåãåãããã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ããããã«ç¶æ ãæŽæ°ããå€ãè¿ãå¿ èŠããããŸããcomponentDidCatch(error, info): ãã®ã¡ãœããã¯ãåå«ã³ã³ããŒãã³ãã«ãã£ãŠãšã©ãŒãã¹ããŒãããåŸã«åŒã³åºãããŸããã¹ããŒããããšã©ãŒãšãã©ã®ã³ã³ããŒãã³ãããšã©ãŒãã¹ããŒãããã«é¢ããæ å ±ãå«ã`info`ãªããžã§ã¯ããåãåããŸãããã®ã¡ãœããã䜿çšããŠããšã©ãŒããã°ã«èšé²ããããä»ã®å¯äœçšãå®è¡ãããã§ããŸãã
以äžã¯ããšã©ãŒããŠã³ããªãŒã³ã³ããŒãã³ãã®åºæ¬çãªäŸã§ãã
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 次ã®ã¬ã³ããŒã§ãã©ãŒã«ããã¯UIã衚瀺ãããããã«stateãæŽæ°ããŸãã
return { hasError: true };
}
componentDidCatch(error, info) {
// "componentStack" ã®äŸ:
// in ComponentThatThrows (created by App)
// in App
console.error("Caught an error: ", error, info.componentStack);
// ãšã©ãŒå ±åãµãŒãã¹ã«ãšã©ãŒããã°èšé²ããããšãã§ããŸã
// logErrorToMyService(error, info.componentStack);
}
render() {
if (this.state.hasError) {
// ä»»æã®ã«ã¹ã¿ã ãã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ã§ããŸã
return Something went wrong.
;
}
return this.props.children;
}
}
説æïŒ
ErrorBoundaryã³ã³ããŒãã³ãã¯React.Componentãæ¡åŒµããã¯ã©ã¹ã³ã³ããŒãã³ãã§ãã- ã³ã³ã¹ãã©ã¯ã¿ã¯ã
hasError: falseã§ç¶æ ãåæåããŸãããã®ãã©ã°ã¯ããã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ãããã©ãããæ±ºå®ããããã«äœ¿çšãããŸãã static getDerivedStateFromError(error)ã¯ãã¹ããŒããããšã©ãŒãåãåãéçã¡ãœããã§ããç¶æ ãhasError: trueã«æŽæ°ããããããã©ãŒã«ããã¯UIã®ã¬ã³ããªã³ã°ãããªã¬ãŒããŸããcomponentDidCatch(error, info)ã¯ããšã©ãŒãšã³ã³ããŒãã³ãã¹ã¿ãã¯ã«é¢ããæ å ±ãå«ãinfoãªããžã§ã¯ããåãåãã©ã€ããµã€ã¯ã«ã¡ãœããã§ããã³ã³ãœãŒã«ã«ãšã©ãŒããã°èšé²ããããã«äœ¿çšãããŸããæ¬çªã¢ããªã±ãŒã·ã§ã³ã§ã¯ãéåžžããšã©ãŒå ±åãµãŒãã¹ã«ãšã©ãŒããã°èšé²ããŸããrender()ã¡ãœããã¯hasErrorç¶æ ããã§ãã¯ããŸããtrueã®å Žåããã©ãŒã«ããã¯UIïŒãã®å Žåã¯åçŽãªã¿ã°ïŒãã¬ã³ããªã³ã°ããŸãããã以å€ã®å Žåã¯ãã³ã³ããŒãã³ãã®åãã¬ã³ããªã³ã°ããŸãã
ãšã©ãŒããŠã³ããªãŒã®äœ¿çš
ãšã©ãŒããŠã³ããªãŒã䜿çšããã«ã¯ãä¿è·ãããã³ã³ããŒãã³ããErrorBoundaryã³ã³ããŒãã³ãã§ã©ããããã ãã§ãã
ããComponentThatMightThrowããšã©ãŒãã¹ããŒããå ŽåãErrorBoundaryããšã©ãŒããã£ãããããã®ç¶æ
ãæŽæ°ããŠãã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ããŸããã¢ããªã±ãŒã·ã§ã³ã®æ®ãã®éšåã¯æ£åžžã«æ©èœãç¶ããŸãã
ãšã©ãŒããŠã³ããªãŒã®é 眮
ãšã©ãŒããŠã³ããªãŒã®é 眮ã¯ã广çãªãšã©ãŒãã³ããªã³ã°ã«ãšã£ãŠéåžžã«éèŠã§ãã以äžã®æŠç¥ãæ€èšããŠãã ããã
- ãããã¬ãã«ã®ãšã©ãŒããŠã³ããªãŒïŒ ã¢ããªã±ãŒã·ã§ã³å šäœããšã©ãŒããŠã³ããªãŒã§ã©ããããŠãæªåŠçã®ãšã©ãŒããã£ããããå®å šãªã¢ããªã±ãŒã·ã§ã³ã¯ã©ãã·ã¥ãé²ããŸããããã¯åºæ¬çãªã¬ãã«ã®ä¿è·ãæäŸããŸãã
- ç²åºŠã®çްãããšã©ãŒããŠã³ããªãŒïŒ ç¹å®ã®ã³ã³ããŒãã³ããã¢ããªã±ãŒã·ã§ã³ã®ã»ã¯ã·ã§ã³ããšã©ãŒããŠã³ããªãŒã§ã©ããããŠããšã©ãŒãåé¢ããããã¿ãŒã²ãããçµã£ããã©ãŒã«ããã¯UIãæäŸããŸããäŸãã°ãå€éšAPIããããŒã¿ãååŸããã³ã³ããŒãã³ãããšã©ãŒããŠã³ããªãŒã§ã©ããããããšãèããããŸãã
- ããŒãžã¬ãã«ã®ãšã©ãŒããŠã³ããªãŒïŒ ã¢ããªã±ãŒã·ã§ã³ã®ããŒãžå šäœãã«ãŒãã®åšãã«ãšã©ãŒããŠã³ããªãŒãé 眮ããããšãæ€èšããŠãã ãããããã«ããã1ã€ã®ããŒãžã®ãšã©ãŒãä»ã®ããŒãžã«åœ±é¿ãäžããã®ãé²ããŸãã
äŸïŒ
function App() {
return (
);
}
ãã®äŸã§ã¯ãã¢ããªã±ãŒã·ã§ã³ã®åäž»èŠã»ã¯ã·ã§ã³ïŒHeaderãSidebarãContentAreaãFooterïŒããšã©ãŒããŠã³ããªãŒã§ã©ãããããŠããŸããããã«ãããåã»ã¯ã·ã§ã³ãç¬ç«ããŠãšã©ãŒãåŠçã§ããåäžã®ãšã©ãŒãã¢ããªã±ãŒã·ã§ã³å šäœã«åœ±é¿ãäžããã®ãé²ããŸãã
ãã©ãŒã«ããã¯UIã®ã«ã¹ã¿ãã€ãº
ãšã©ãŒããŠã³ããªãŒã«ãã£ãŠè¡šç€ºããããã©ãŒã«ããã¯UIã¯ãæçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒã§ããã¹ãã§ãã以äžã®ã¬ã€ãã©ã€ã³ãæ€èšããŠãã ããã
- æç¢ºãªãšã©ãŒã¡ãã»ãŒãžãæäŸããïŒ äœãåé¡ã ã£ããã説æãããç°¡æœã§æçãªãšã©ãŒã¡ãã»ãŒãžã衚瀺ããŸããæè¡çãªå°éçšèªãé¿ãããŠãŒã¶ãŒãçè§£ããããèšèã䜿çšããŠãã ããã
- 解決çãææ¡ããïŒ ããŒãžã®åèªã¿èŸŒã¿ãåŸã§å詊è¡ããµããŒããžã®é£çµ¡ãªã©ããŠãŒã¶ãŒã«å¯èœãªè§£æ±ºçãææ¡ããŸãã
- ãã©ã³ãã®äžè²«æ§ãç¶æããïŒ ãã©ãŒã«ããã¯UIãã¢ããªã±ãŒã·ã§ã³å šäœã®ãã¶ã€ã³ãšãã©ã³ãã£ã³ã°ã«äžèŽããããã«ããŸããããã¯äžè²«ãããŠãŒã¶ãŒäœéšãç¶æããã®ã«åœ¹ç«ã¡ãŸãã
- ãšã©ãŒãå ±åããæ¹æ³ãæäŸããïŒ ãŠãŒã¶ãŒãããŒã ã«ãšã©ãŒãå ±åã§ãããã¿ã³ããªã³ã¯ãå«ããŸããããã¯ãããã°ãåé¡ä¿®æ£ã®ããã®è²Žéãªæ å ±ãæäŸã§ããŸãã
äŸïŒ
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
static getDerivedStateFromError(error) {
// 次ã®ã¬ã³ããŒã§ãã©ãŒã«ããã¯UIã衚瀺ãããããã«stateãæŽæ°ããŸãã
return { hasError: true };
}
componentDidCatch(error, info) {
// ãšã©ãŒå ±åãµãŒãã¹ã«ãšã©ãŒããã°èšé²ããããšãã§ããŸã
console.error("Caught an error: ", error, info.componentStack);
}
render() {
if (this.state.hasError) {
// ä»»æã®ã«ã¹ã¿ã ãã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ã§ããŸã
return (
åé¡ãçºçããŸããã
ç³ãèš³ãããŸãããããã®ã³ã³ãã³ãã®è¡šç€ºäžã«ãšã©ãŒãçºçããŸããã
ããŒãžãåèªã¿èŸŒã¿ããããåé¡ã解決ããªãå Žåã¯ãµããŒãã«ãåãåãããã ããã
ãµããŒãã«é£çµ¡
);
}
return this.props.children;
}
}
ãã®äŸã§ã¯ãæç¢ºãªãšã©ãŒã¡ãã»ãŒãžãææ¡ããã解決çãããŒãžãåèªã¿èŸŒã¿ããŠãµããŒãã«é£çµ¡ããããã®ãªã³ã¯ãå«ããããæçãªãã©ãŒã«ããã¯UIã衚瀺ããŸãã
ç°ãªãçš®é¡ã®ãšã©ãŒã®åŠç
ãšã©ãŒããŠã³ããªãŒã¯ãã¬ã³ããªã³ã°äžãã©ã€ããµã€ã¯ã«ã¡ãœããå ãããã³ãã以äžã®ããªãŒå šäœã®ã³ã³ã¹ãã©ã¯ã¿ã§çºçãããšã©ãŒããã£ããããŸãã以äžã®ãšã©ãŒã¯ãã£ãã*ããŸãã*ã
- ã€ãã³ããã³ãã©
- éåæã³ãŒãïŒäŸïŒ
setTimeoutãrequestAnimationFrameïŒ - ãµãŒããŒãµã€ãã¬ã³ããªã³ã°
- ãšã©ãŒããŠã³ããªãŒèªäœã§ã¹ããŒããããšã©ãŒïŒãã®åã§ã¯ãªãïŒ
ãããã®çš®é¡ã®ãšã©ãŒãåŠçããã«ã¯ãç°ãªããã¯ããã¯ã䜿çšããå¿ èŠããããŸãã
ã€ãã³ããã³ãã©
ã€ãã³ããã³ãã©ã§çºçãããšã©ãŒã«ã€ããŠã¯ãæšæºã®try...catchãããã¯ã䜿çšããŸãã
function MyComponent() {
const handleClick = () => {
try {
// ãšã©ãŒãã¹ããŒããå¯èœæ§ã®ããã³ãŒã
throw new Error("Something went wrong in the event handler");
} catch (error) {
console.error("Error in event handler: ", error);
// ãšã©ãŒãåŠçããïŒäŸïŒãšã©ãŒã¡ãã»ãŒãžã衚瀺ïŒ
alert("ãšã©ãŒãçºçããŸãããããäžåºŠã詊ããã ããã");
}
};
return ;
}
éåæã³ãŒã
éåæã³ãŒãã§çºçãããšã©ãŒã«ã€ããŠã¯ãéåæé¢æ°å
ã§try...catchãããã¯ã䜿çšããŸãã
function MyComponent() {
useEffect(() => {
async function fetchData() {
try {
const response = await fetch("https://api.example.com/data");
const data = await response.json();
// ããŒã¿ãåŠçãã
console.log(data);
} catch (error) {
console.error("Error fetching data: ", error);
// ãšã©ãŒãåŠçããïŒäŸïŒãšã©ãŒã¡ãã»ãŒãžã衚瀺ïŒ
alert("ããŒã¿ã®ååŸã«å€±æããŸãããåŸã§ããäžåºŠã詊ããã ããã");
}
}
fetchData();
}, []);
return ããŒã¿ãããŒãäž...;
}
ãããã¯ãæªåŠçã®promiseãªãžã§ã¯ã·ã§ã³ã«å¯ŸããŠã°ããŒãã«ãªãšã©ãŒãã³ããªã³ã°ã¡ã«ããºã ã䜿çšããããšãã§ããŸãã
window.addEventListener('unhandledrejection', function(event) {
console.error('Unhandled rejection (promise: ', event.promise, ', reason: ', event.reason, ');');
// ãªãã·ã§ã³ã§ã°ããŒãã«ãšã©ãŒã¡ãã»ãŒãžã衚瀺ãããããµãŒãã¹ã«ãšã©ãŒããã°èšé²ãã
alert("äºæãã¬ãšã©ãŒãçºçããŸãããåŸã§ããäžåºŠã詊ããã ããã");
});
é«åºŠãªãšã©ãŒããŠã³ããªãŒã®ãã¯ããã¯
ãšã©ãŒããŠã³ããªãŒã®ãªã»ãã
å Žåã«ãã£ãŠã¯ããŠãŒã¶ãŒããšã©ãŒããŠã³ããªãŒããªã»ãããããšã©ãŒãåŒãèµ·ãããæäœãå詊è¡ããæ¹æ³ãæäŸãããããšããããŸããããã¯ããšã©ãŒããããã¯ãŒã¯ã®åé¡ãªã©äžæçãªåé¡ã«ãã£ãŠåŒãèµ·ããããå Žåã«åœ¹ç«ã¡ãŸãã
ãšã©ãŒããŠã³ããªãŒããªã»ããããã«ã¯ãReduxãContextã®ãããªç¶æ 管çã©ã€ãã©ãªã䜿çšããŠãšã©ãŒç¶æ ã管çãããªã»ãã颿°ãæäŸã§ããŸãããããã¯ããšã©ãŒããŠã³ããªãŒã匷å¶çã«åããŠã³ããããšãããããç°¡åãªã¢ãããŒãã䜿çšããããšãã§ããŸãã
äŸïŒåŒ·å¶çãªåããŠã³ãïŒïŒ
class ErrorBoundary extends React.Component {
constructor(props) {
super(props);
this.state = { hasError: false, errorCount: 0, key: 0 };
}
static getDerivedStateFromError(error) {
// 次ã®ã¬ã³ããŒã§ãã©ãŒã«ããã¯UIã衚瀺ãããããã«stateãæŽæ°ããŸãã
return { hasError: true };
}
componentDidCatch(error, info) {
// ãšã©ãŒå ±åãµãŒãã¹ã«ãšã©ãŒããã°èšé²ããããšãã§ããŸã
console.error("Caught an error: ", error, info.componentStack);
this.setState(prevState => ({ errorCount: prevState.errorCount + 1 }));
}
resetError = () => {
this.setState({hasError: false, key: this.state.key + 1})
}
render() {
if (this.state.hasError) {
// ä»»æã®ã«ã¹ã¿ã ãã©ãŒã«ããã¯UIãã¬ã³ããªã³ã°ã§ããŸã
return (
åé¡ãçºçããŸããã
ç³ãèš³ãããŸãããããã®ã³ã³ãã³ãã®è¡šç€ºäžã«ãšã©ãŒãçºçããŸããã
);
}
return {this.props.children};
}
}
ãã®äŸã§ã¯ãã©ããã³ã°ããdivã«'key'ã远å ãããŠããŸããããŒã倿Žãããšã³ã³ããŒãã³ãã匷å¶çã«åããŠã³ãããã广çã«ãšã©ãŒç¶æ ãã¯ãªã¢ãããŸãã`resetError`ã¡ãœããã¯ã³ã³ããŒãã³ãã®`key`ç¶æ ãæŽæ°ããã³ã³ããŒãã³ããåããŠã³ãããŠãã®åãåã¬ã³ããªã³ã°ããåå ãšãªããŸãã
Suspenseãšãšã©ãŒããŠã³ããªãŒã®äœµçš
React Suspenseã䜿çšãããšãäœããã®æ¡ä»¶ãæºãããããŸã§ïŒäŸïŒããŒã¿ããã§ããããããŸã§ïŒãã³ã³ããŒãã³ãã®ã¬ã³ããªã³ã°ããäžæåæ¢ãã§ããŸãããšã©ãŒããŠã³ããªãŒãšSuspenseãçµã¿åãããããšã§ãéåææäœã«å¯ŸããŠããå ç¢ãªãšã©ãŒãã³ããªã³ã°äœéšãæäŸã§ããŸãã
import React, { Suspense } from 'react';
function MyComponent() {
return (
ããŒãã£ã³ã°äž... ãã®äŸã§ã¯ãDataFetchingComponentã¯ã«ã¹ã¿ã ããã¯ã䜿çšããŠéåæã«ããŒã¿ããã§ããããŸããSuspenseã³ã³ããŒãã³ãã¯ãããŒã¿ããã§ãããããŠããéã«ããŒãã£ã³ã°ã€ã³ãžã±ãŒã¿ã衚瀺ããŸããããŒã¿ãã§ããããã»ã¹äžã«ãšã©ãŒãçºçããå ŽåãErrorBoundaryããšã©ãŒããã£ããããŠãã©ãŒã«ããã¯UIã衚瀺ããŸãã
Reactãšã©ãŒããŠã³ããªãŒã®ãã¹ããã©ã¯ãã£ã¹
- ãšã©ãŒããŠã³ããªãŒãé床ã«äœ¿çšããªãïŒ ãšã©ãŒããŠã³ããªãŒã¯åŒ·åã§ããããã¹ãŠã®ã³ã³ããŒãã³ããããã§ã©ããããããšã¯é¿ããŠãã ãããå€éšAPIããããŒã¿ãååŸããã³ã³ããŒãã³ããããŠãŒã¶ãŒå ¥åã«äŸåããã³ã³ããŒãã³ããªã©ããšã©ãŒãã¹ããŒããå¯èœæ§ãé«ãã³ã³ããŒãã³ããã©ããããããšã«éäžããŠãã ããã
- 广çã«ãšã©ãŒããã°ã«èšé²ããïŒ
componentDidCatchã¡ãœããã䜿çšããŠããšã©ãŒå ±åãµãŒãã¹ããµãŒããŒãµã€ãã®ãã°ã«ãšã©ãŒãèšé²ããŸããã³ã³ããŒãã³ãã¹ã¿ãã¯ããŠãŒã¶ãŒã®ã»ãã·ã§ã³ãªã©ããšã©ãŒã«é¢ããã§ããã ãå€ãã®æ å ±ãå«ããŠãã ããã - æçãªãã©ãŒã«ããã¯UIãæäŸããïŒ ãã©ãŒã«ããã¯UIã¯æçã§ãŠãŒã¶ãŒãã¬ã³ããªãŒã§ããã¹ãã§ããäžè¬çãªãšã©ãŒã¡ãã»ãŒãžã®è¡šç€ºãé¿ããåé¡ã解決ããããã®åœ¹ç«ã€ææ¡ããŠãŒã¶ãŒã«æäŸããŠãã ããã
- ãšã©ãŒããŠã³ããªãŒããã¹ãããïŒ ãšã©ãŒããŠã³ããªãŒãæ£ããæ©èœããŠããããšã確èªããããã®ãã¹ããèšè¿°ããŸããã³ã³ããŒãã³ãã§ãšã©ãŒãã·ãã¥ã¬ãŒããããšã©ãŒããŠã³ããªãŒããšã©ãŒããã£ããããŠæ£ãããã©ãŒã«ããã¯UIã衚瀺ããããšã確èªããŸãã
- ãµãŒããŒãµã€ãã®ãšã©ãŒãã³ããªã³ã°ãæ€èšããïŒ ãšã©ãŒããŠã³ããªãŒã¯äž»ã«ã¯ã©ã€ã¢ã³ããµã€ãã®ãšã©ãŒãã³ããªã³ã°ã¡ã«ããºã ã§ããã¢ããªã±ãŒã·ã§ã³ãã¬ã³ããªã³ã°ãããåã«çºçãããšã©ãŒããã£ããããããã«ããµãŒããŒãµã€ãã§ããšã©ãŒãã³ããªã³ã°ãå®è£ ããå¿ èŠããããŸãã
å®äžçã®äŸ
以äžã¯ããšã©ãŒããŠã³ããªãŒãã©ã®ããã«äœ¿çšã§ãããã®å®äžçã®äŸã§ãã
- Eã³ããŒã¹ãµã€ãïŒ ååãªã¹ãã³ã³ããŒãã³ãããšã©ãŒããŠã³ããªãŒã§ã©ãããããšã©ãŒãããŒãžå šäœãã¯ã©ãã·ã¥ãããã®ãé²ããŸãã代æ¿ååãææ¡ãããã©ãŒã«ããã¯UIã衚瀺ããŸãã
- ãœãŒã·ã£ã«ã¡ãã£ã¢ãã©ãããã©ãŒã ïŒ ãŠãŒã¶ãŒãããã¡ã€ã«ã³ã³ããŒãã³ãããšã©ãŒããŠã³ããªãŒã§ã©ãããããšã©ãŒãä»ã®ãŠãŒã¶ãŒã®ãããã¡ã€ã«ã«åœ±é¿ãäžããã®ãé²ããŸãããããã¡ã€ã«ãããŒãã§ããªãã£ãããšã瀺ããã©ãŒã«ããã¯UIã衚瀺ããŸãã
- ããŒã¿å¯èŠåããã·ã¥ããŒãïŒ ãã£ãŒãã³ã³ããŒãã³ãããšã©ãŒããŠã³ããªãŒã§ã©ãããããšã©ãŒãããã·ã¥ããŒãå šäœãã¯ã©ãã·ã¥ãããã®ãé²ããŸãããã£ãŒããã¬ã³ããªã³ã°ã§ããªãã£ãããšã瀺ããã©ãŒã«ããã¯UIã衚瀺ããŸãã
- åœéåãããã¢ããªã±ãŒã·ã§ã³ïŒ ããŒã«ã©ã€ãºãããæååããªãœãŒã¹ãæ¬ èœããŠããç¶æ³ãåŠçããããã«ãšã©ãŒããŠã³ããªãŒã䜿çšããããã©ã«ãèšèªãžã®åªé ãªãã©ãŒã«ããã¯ããŠãŒã¶ãŒãã¬ã³ããªãŒãªãšã©ãŒã¡ãã»ãŒãžãæäŸããŸãã
ãšã©ãŒããŠã³ããªãŒã®ä»£æ¿æ¡
ãšã©ãŒããŠã³ããªãŒã¯Reactã§ã®ãšã©ãŒåŠçã«æšå¥šãããæ¹æ³ã§ãããæ€èšã§ãã代æ¿ã¢ãããŒããããã€ããããŸãããã ãããããã®ä»£æ¿æ¡ã¯ãã¢ããªã±ãŒã·ã§ã³ã®ã¯ã©ãã·ã¥ãé²ããã·ãŒã ã¬ã¹ãªãŠãŒã¶ãŒäœéšãæäŸããäžã§ããšã©ãŒããŠã³ããªãŒã»ã©å¹æçã§ã¯ãªãå¯èœæ§ãããããšã«æ³šæããŠãã ããã
- Try-Catch ãããã¯ïŒ ã³ãŒãã®ã»ã¯ã·ã§ã³ãtry-catchãããã¯ã§å²ãããšã¯ããšã©ãŒåŠçã®åºæ¬çãªã¢ãããŒãã§ããããã«ããããšã©ãŒããã£ããããäŸå€ãçºçããå Žåã«ä»£æ¿ã³ãŒããå®è¡ã§ããŸããç¹å®ã®æœåšçãªãšã©ãŒãåŠçããã®ã«åœ¹ç«ã¡ãŸãããã³ã³ããŒãã³ãã®ã¢ã³ããŠã³ããã¢ããªã±ãŒã·ã§ã³å šäœã®ã¯ã©ãã·ã¥ãé²ãããšã¯ã§ããŸããã
- ã«ã¹ã¿ã ãšã©ãŒåŠçã³ã³ããŒãã³ãïŒ ç¶æ 管çãšæ¡ä»¶ä»ãã¬ã³ããªã³ã°ã䜿çšããŠãç¬èªã®ãšã©ãŒåŠçã³ã³ããŒãã³ããæ§ç¯ããããšãã§ããŸãããã ãããã®ã¢ãããŒãã¯ããå€ãã®æäœæ¥ãå¿ èŠãšããReactã«çµã¿èŸŒãŸãããšã©ãŒåŠçã¡ã«ããºã ãæŽ»çšããŸããã
- ã°ããŒãã«ãšã©ãŒåŠçïŒ ã°ããŒãã«ãšã©ãŒãã³ãã©ãèšå®ãããšãæªåŠçã®äŸå€ããã£ããããŠãã°ã«èšé²ããã®ã«åœ¹ç«ã¡ãŸãããã ãããšã©ãŒãã³ã³ããŒãã³ãã®ã¢ã³ããŠã³ããã¢ããªã±ãŒã·ã§ã³ã®ã¯ã©ãã·ã¥ãåŒãèµ·ããã®ãé²ãããšã¯ã§ããŸããã
æçµçã«ããšã©ãŒããŠã³ããªãŒã¯Reactã«ããããšã©ãŒåŠçã«å¯ŸããŠå ç¢ã§æšæºåãããã¢ãããŒããæäŸãããããã»ãšãã©ã®ãŠãŒã¹ã±ãŒã¹ã§æšå¥šãããéžæè¢ãšãªããŸãã
çµè«
Reactãšã©ãŒããŠã³ããªãŒã¯ãå ç¢ã§ãŠãŒã¶ãŒãã¬ã³ããªãŒãªReactã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã®äžå¯æ¬ ãªããŒã«ã§ãããšã©ãŒããã£ããããŠãã©ãŒã«ããã¯UIã衚瀺ããããšã«ãããã¢ããªã±ãŒã·ã§ã³ã®ã¯ã©ãã·ã¥ãé²ãããŠãŒã¶ãŒäœéšãåäžããããšã©ãŒã®ãããã°ãç°¡çŽ åããŸãããã®ã¬ã€ãã§æŠèª¬ãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ãã¢ããªã±ãŒã·ã§ã³ã«ãšã©ãŒããŠã³ããªãŒã广çã«å®è£ ããäžçäžã®ãŠãŒã¶ãŒã®ããã«ããå埩åãããä¿¡é Œæ§ã®é«ããŠãŒã¶ãŒäœéšãåµé ããããšãã§ããŸãã